@import url("rem.less");

/*map start*/
.map-blk {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .map {
    width: 100%;
    height: 100%;
  }
  .map-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #091221 no-repeat;
    background-size: cover;
    .floor-marker {
      width: 100%;
      height: 100%;
    }
  }
}
.map {
  background: #091221 !important;
}
.map-type-dropdown-menu {
  margin-top: 0 !important;
}
.map-type-drop-link {
  span {
    display: none;
    margin-right: 5px;
  }
  .el-icon--right {
    margin-left: 0;
  }
  &:hover {
    span {
      display: inline;
    }
  }
}

/* 隐藏地图左下角的百度logo  */
.anchorBL {
  img {
    display: none;
  }
}
.BMap_cpyCtrl {
  display: none;
}

.BMap_mask {
  .logo {
    border: none;
    width: 102.6px;
    height: 28px;
  }

  .tel {
    font-size: 20px;
  }

  .bmap-about {
    position: absolute;
    left: 25%;
    bottom: 10px;
    color: lightblue;
    z-index: 30;

    .bmap-about__comp,
    .bmap-about__tel {
      font-size: 12px;
    }

    .bmap-about__comp {
      margin-bottom: 0;
    }
  }
}
html {
  // button
  .el-button {
    .h(32);
    .lh(32);
    .fs(14);
    .pd(0, 8);
    .px2rem(border-radius, 3);
    .iconfont {
      .fs(14);
      .lh(10);
    }
    &.el-button--large {
      .h(56);
      .lh(56);
      .fs(18);
      .pd(0, 20);
    }
  }
  //dropdown
  .el-dropdown {
    color: inherit;
    font-size: inherit;
  }
  .el-dropdown-menu {
    .pt(10);
    .pb(10);
  }
  .el-popper[x-placement^="bottom"] {
    .mt(-10);
  }
  .el-dropdown-menu__item {
    .lh(36);
    .fs(16);
  }
  //form
  .el-form-item__label {
    color: inherit;
  }
  .el-form-item:last-child {
    margin-bottom: 0;
  }
  .el-input__inner {
    .h(32);
    .pd(0, 12);
    .fs(14);
  }
  .el-textarea__inner {
    .pd(5, 15);
    .fs(14);
  }
  .el-checkbox__label {
    .pl(10);
    .fs(14);
  }
  .el-checkbox__inner {
    .w(16);
    .h(16);
  }
  .el-checkbox__inner:after {
    .w(8);
    .h(8);
  }
  .el-checkbox__input.is-checked .el-checkbox__inner:after {
    .left(3);
    .top(1);
    .px2rem(border-width, 2);
  }
  .el-select {
    .el-input__icon {
      .fs(12);
    }
    .el-input .el-select__caret {
      .fs(12);
    }
  }
  .el-select-dropdown {
    &.el-popper {
      margin: 0;
      .mt(10);
    }
    .radius(4);
  }
  .el-select-dropdown__wrap {
    .px2rem(max-height, 274);
  }
  .el-select-dropdown__list {
    .pd(6, 0);
  }
  .el-select-dropdown__item {
    .h(34);
    .fs(14);
    .pd(0, 20);
    .lh(34);
  }
  .el-popper[x-placement^="bottom"] .popper__arrow {
    .top(-6);
    .mr(3);
  }
  .el-popper .popper__arrow {
    .px2rem(border-width, 6);
  }
  .el-input__suffix {
    .right(5);
    .el-input__inner {
      .pr(30);
    }
  }
  .el-form--inline .el-form-item__label {
    .lh(32);
  }
  .el-form--inline .el-form-item__content {
    vertical-align: baseline;
  }
  .el-form--inline .el-form-item {
    .mr(10);
  }
  .el-form-item {
    .mb(20);
  }
  .el-form-item__label {
    padding: 0;
    .pr(20);
    .fs(14);
    .lh(32);
  }
  .el-form-item__content {
    .lh(32);
    .fs(14);
  }
  .el-form-item__error {
    .fs(14);
  }
  .el-input__prefix,
  .el-input__suffix {
    .el-input__icon {
      .w(20);
      .lh(36);
    }
  }
  .filter-blk .el-form-item {
    margin-bottom: 0;
  }
  .el-radio {
    .mr(30);
    .fs(14);
  }
  .el-radio__label {
    .fs(14);
    .pl(10);
  }
  .el-radio__inner {
    .round(16);
    &:after {
      .round(8);
    }
  }
  .el-date-picker__header {
    .mg(12);
  }
  .el-date-picker__header-label {
    .fs(16);
    .lh(22);
    .pd(0, 5);
  }
  .el-picker-panel__icon-btn {
    .mt(8);
    .fs(12);
    .lh(22);
  }
  .el-picker-panel__content {
    .mg(15);
  }
  .el-date-picker.el-popper {
    .mt(12);
  }
  .el-date-table {
    .fs(14);
    th {
      .pd(5);
    }
    td {
      .w(32);
      .pd(4, 0);
      span {
        .square(24);
        .lh(24);
      }
      div {
        .h(30);
        .pd(3, 0);
      }
    }
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    .w(180);
  }
  .el-select {
    .w(160);
  }
  .el-range-editor {
    &.el-input__inner {
      .w(400);
      .pd(0, 10);
    }
    .el-range__icon {
      .fs(14);
      .lh(32);
      .ml(5);
    }
  }
  .el-date-editor .el-range-input,
  .el-date-editor .el-range-separator {
    .fs(14);
    .lh(32);
  }

  //dialog
  .el-dialog__header {
    .h(60);
    .pd(0, 23);
    .px2rem(border-top-left-radius, 10);
    .px2rem(border-top-right-radius, 10);
    .lh(60);
  }
  .el-dialog__title {
    .fs(18);
  }
  .el-dialog__headerbtn {
    .w(60);
    .lh(60);
    .el-dialog__close {
      .fs(20);
    }
  }
  .el-dialog__body {
    .pd(30, 20);
    .fs(14);
  }

  //table
  .el-table {
    .cell {
      .pl(10);
      .pr(10);
      .fs(14);
      .lh(23);
    }
    th > .cell {
      .pl(10);
      .pr(10);
    }
    th,
    td {
      .pd(15, 0);
    }

    .el-table__header-wrapper {
      th,
      td {
        .fs(14);
      }
    }
    .el-table__body-wrapper {
      td {
        .px2rem(border-width, 10);
      }
    }
    .el-table__empty-text {
      .fs(14);
    }
  }
  .el-pagination {
    .btn-next,
    .btn-prev,
    .el-pager li {
      .square(24);
      padding: 0;
      .mg(0, 5);
      .fs(14);
      .lh(24);
      .px2rem(border-radius, 3);
    }
    .el-pagination__total,
    span:not([class*="suffix"]) {
      .h(24);
      .ml(24);
      .fs(14);
      .lh(24);
    }

    .el-pagination__jump {
      .el-pagination__editor {
        .h(24);
        .fs(14);
        .lh(24);
        .pd(0, 2);
        .mg(0, 2);
        .px2rem(border-radius, 3);
      }
      .el-input__inner {
        .w(48);
        .h(24);
        .pd(0, 10);
        .px2rem(border-radius, 3);
      }
    }
  }
  .el-loading-spinner .el-loading-text {
    .fs(14);
  }
  .el-loading-spinner i {
    .fs(22);
  }
}
.page-header {
  &.iot-header {
    .pxTrem(height, 110);
    .pd(0, 40);
    .fs(18);
    .lh(74);
    background-image: url(../images/iot/bg-title.png);
    background-size: 100% 100%;
    .logo {
      .h(44);
      .mt(32);
    }
    .avatar {
      .round(25);
    }

    .title {
      .pt(32);
      .fs(44);
      .lh(44);
      color: #37c5ff;
    }
  }
}

.iot-page {
  .flex;
  .v-c;
  .h-c;
  width: 100%;
  height: 100%;
  .inner {
    position: relative;
    .w(1920);
    .h(1080);
  }
}
.iot-firm {
  position: absolute;
  .top(150);
  .left(504);
  z-index: 3;
  .w(266);
  .el-input__inner {
    .h(50);
    background: #000b52;
    border-radius: 5px;
    border: 1px solid #245baf;
    .lh(48);
  }
  .icon-search {
    position: absolute;
    .right(16);
    .top(15);
    color: #afecff;
    .fs(16);
    z-index: 10;
  }
  .el-input__suffix {
    .lh(50);
    .right(15);
  }
  .el-select {
    width: 100%;
  }
}
.page-iot-container {
  height: 100%;
  .iot-main {
    // position: relative;
  }
  .iot-left,
  .iot-right {
    position: absolute;
    .bottom(30);
    .w(442);
    z-index: 2;
  }
  .iot-left {
    .left(30);
  }
  .iot-right {
    .right(30);
  }
  .iot-bottom {
    position: absolute;
    .bottom(30);
    .left(504);
    .w(912);
  }

  .iot-blk {
    height: auto;
    .pd(23);
    .hd {
      .h(26);
      .pl(12);
      .lh(26);
      .fs(20);
      &:before {
        .w(3);
      }
      .more {
        .fs(14);
        .icon-more {
          .fs(12);
        }
      }
    }
    .con {
      .pd(15, 0);
      .fs(14);
    }
  }
  .today-blk {
    color: #afecff;
    text-align: center;
    .total {
      .mt(10);
      .fm-num {
        .fs(56);
        color: @colorBlue;
        line-height: 1;
      }
    }
    .stat {
      .mt(30);
      .fm-num {
        .fs(50);
        color: @colorYellow;
        line-height: 1;
      }
    }
    .wrap {
      flex-wrap: wrap;
           div {
        width: 20%;
      }
    }
    &.kitchen {
      .h(366);
      .stat {
        .mt(15);
      }
      .today-alarm {
        width: 25%;
        .mb(20);
        &.blue {
          .fm-num {
            color: #00e7ff;
          }
        }
        &.org {
          .fm-num {
            color: #ff8647;
          }
        }
      }
    }
    &.kitchen-device {
      .h(195);
      .stat {
        .mt(15);
      }
    }
  }
  .kitchen-region {
    .h(900);
    width: 100%;
    .con {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .region-search {
      .h(46);
      .pr(16);
      background: rgba(0, 11, 82, 0.8);
      .px2rem(border-radius, 5);
      border: 1px solid #3f95ff;
      .el-input {
        height: 100%;
      }
      .el-input__inner {
        display: block;
        background: none;
        height: 100%;
        border: none;
        .fs(16);
      }
      .icon-search {
        .fs(20);
      }
    }
  }
  .kitchen-regin-tree {
    flex: 1;
    overflow: auto;
    .mt(20);
    .el-tree-node__expand-icon.el-icon-caret-right {
      display: none;
      &:after,
      &:before {
        content: none;
      }
      &.expanded:before {
        content: none;
      }
    }
    .custom-node {
      width: 100%;

      .pl(20);
      .pr(20);
      .fs(16);

      color: #fff;
      .icon-more {
        .fs(16);
        transform: rotate(90deg);
        &.up {
          transform: rotate(-90deg);
        }
      }
    }
    .el-tree-node {
      .mt(5);
      .el-tree-node__content {
        // .h(46);
        height: auto;
        .px2rem(min-height, 46);
        background: #3f6fff !important;
        .pxTrem(border-radius, 5);
      }
    }
    .node-video {
      cursor: default;
      margin-left: -90px;
      .w(400);
      .pl(10);
      .pr(10);
      .no-data {
        display: flex;
        align-items: center;
        justify-content: center;
        .h(200);
        .fs(14);
      }
    }
    & > .el-tree-node {
      .el-tree-node__content {
        background: #3f6fff !important;
      }
      .el-tree-node__children {
        & > .el-tree-node {
          .el-tree-node__content {
            background: rgba(63, 111, 255, 0.8) !important;
          }
          .el-tree-node__children {
            & > .el-tree-node {
              .el-tree-node__content {
                background: rgba(63, 111, 255, 0.6) !important;
              }
              .el-tree-node__children {
                & > .el-tree-node {
                  .el-tree-node__content {
                    background: rgba(63, 111, 255, 0.4) !important;
                  }
                  .el-tree-node__children {
                    & > .el-tree-node {
                      .el-tree-node__content {
                        background: rgba(63, 111, 255, 0.2) !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .node-video-list {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .pt(10);
    .pb(10);
  }
  .node-video-item {
    position: relative;
    .w(176);
    .h(96);
    & > h6 {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      .h(20);
      .pl(10);
      .pr(10);
      background: rgba(0, 0, 0, 0.4);
      .fs(12);
      .ellipsis;
    }
    &.active {
      border: 1px solid #fff;
    }
  }
  .node-video-blk {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      .w(24);
      .h(24);
      .mt(-12);
      .ml(-12);
    }
  }
  .iot-video-modal {
    position: absolute;
    .right(30);
    .bottom(30);
    .w(1390);
    .h(900);
    z-index: 6;
    background-color: #050d41;
    .con {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    &.fullscreen {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
    }
    .opers {
      & > a {
        .mr(13);
        &.active {
          .iconfont {
            opacity: 1;
          }
        }
      }
      .iconfont {
        .fs(20);
        color: #00e7ff;
        opacity: 0.6;
      }
    }
  }
  .iot-video-list {
    // background: #000;
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .iot-video-item {
    width: 100%;
    height: 100%;
    .pt(20);
    &.s4 {
      height: 50%;
      width: 50%;
      &:nth-child(2n + 1) {
        .pr(20);
      }
      .iot-video-blk {
        .iot-video-hd {
          .h(34);
          .fs(18);
        }
      }
    }
    &.s16 {
      height: 25%;
      width: 25%;
      .pr(20);
      &:nth-child(4n) {
        .pr(0);
      }
      .iot-video-blk {
        .iot-video-hd {
          .h(30);
          .fs(16);
        }
      }
    }
  }
  .iot-video-blk {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #284fbb;
    .px2rem(border-radius, 6);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff;
    .iot-video-hd {
      display: flex;
      align-items: center;
      .h(50);
      .pl(20);
      .pr(20);
      .fs(22);
      .iconfont {
        .fs(20);
      }
    }
    .video-blk {
      flex: 1;
      background: #000;
    }
  }
  .realtime-list {
    .h(200);
    overflow: auto;
    li {
      .h(60);
      .mb(9);
      .pd(10, 13);
      .fs(13);
      color: #afecff;
      background: #06235c;
      cursor: pointer;
      &:last-child {
        margin-bottom: 0;
      }
      .name {
        color: #fffb00;
      }
      .opers {
        & > a {
          .ml(10);
          color: #b3baca;
        }
        .iconfont {
          .fs(12);
        }
      }
      .infos {
        .mt(5);
        & > span {
          .mr(38);
        }
      }

      &.no-data {
        background: none;
        text-align: center;
        .flex;
        .v-c;
        .h-c;
        height: 100%;
      }
    }
  }
}
.el-dialog__body {
  .px2rem(min-height, 400);
}
.iot-firm-detail {
  .firm-info {
    .pd(13);
    .fs(14);
    .radius(3);
    background: #124393;
    color: rgba(255, 255, 255, 0.8);
    h3 {
      .mb(10);
      color: #fff;
      .iconfont {
        .fs(14);
        vertical-align: baseline;
      }
    }
    .basic-info {
      .el-col {
        .mg(8, 0);
      }
    }
    &.sum-warn {
      background: linear-gradient(
        133deg,
        rgba(200, 120, 246, 1) 0%,
        rgba(104, 134, 252, 1) 100%
      );
    }
    &.sum-device {
      background: linear-gradient(
        133deg,
        rgba(24, 193, 255, 1) 0%,
        rgba(21, 151, 255, 1) 100%
      );
    }
  }
  .info-num {
    text-align: center;
    b {
      .fs(40);
      color: #fff;
      line-height: 1;
    }
  }
  .divid-blk {
    .firm-info {
      color: rgba(191, 223, 247, 0.8);
    }
    .info-num {
      width: 50%;
      .pd(15, 0);
      b {
        color: #afecff;
      }
    }
    .firm-info {
      .h(230);
    }
  }
  .iot-firm-nav {
    .mb(15);
    .fs(18);
    a {
      display: inline-block;
      .mr(20);
      .lh(30);
      border-bottom: 1px solid transparent;
      .px2rem(border-bottom-width, 3);
      color: rgba(255, 255, 255, 0.7);
      &.active {
        color: #bfdff7;
        border-bottom-color: #bfdff7;
      }
    }
  }
  .firm-chart {
    .mt(-36);
  }
}
.unit-device-item {
  .radius(5);
  .hd {
    .h(36);
    .lh(36);
    .pd(0, 15);
    .px2rem(border-top-right-radius, 5);
    .px2rem(border-top-left-radius, 5);
  }
  .con {
    .pd(15);
    .attr {
      .mg(10, 0);
    }
  }
}
.info-item {
  .mb(10);
}
.device-detail-blk {
  .basic-info,
  .basic-stat {
    .h(252);
  }
  .chart-row {
    .h(230);
  }
}
.recent-week {
  .item {
    .w(75);
    .ml(10);
    .radius(3);
    .lh(30);
  }
  .el-date-editor {
    border-color: #afecff;
    .ml(10);
    .radius(3);
  }
}
.fs-12 {
  .pxTrem(font-size, 12);
}
.fs-20 {
  .pxTrem(font-size, 20);
}
.tab-nav {
  .mb(15);
  .fs(16);
  a {
    .mr(30);
    .lh(30);
    .px2rem(border-bottom-width, 3);
  }
}
/*IOT end*/
.play-drop {
  animation: bounce 1.5s ease-in 0s infinite;
  will-change: transform;
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -20px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
}
.play-pulse {
  animation: pulse 1.5s ease-in 0s infinite;
  will-change: transform;
}
@keyframes pulse {
  from {
    box-shadow: 0 0 4px #fff;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px #fff;
    transform: scale(1.4);
  }
  to {
    box-shadow: 0 0 3px #fff;
    transform: scale(1);
  }
}
.unit-warn-icon {
  .flex;
  .v-c;
  .h-c;
  .w(20);
  .h(20);
  border-radius: 50%;
  background-color: #ffdb00;
  i {
    display: block;
    .w(20);
    .h(20);
    border-radius: 50%;
    background-color: rgba(255, 219, 0, 0.8);
  }
}
.map-device-icon {
  .flex;
  .v-c;
  .h-c;
  .w(30);
  .h(30);
  color: #01e7ff;
  &.alarm {
    color: #f00;
  }
  .iconfont {
    .fs(30);
  }
}
.amap-overlay-text-container {
  background: none;
  color: #01e7ff;
  border: none;
  .fs(14);
  .w(200);
  .ml(-100);
  text-align: center;
}
.video-wrap {
  position: relative;

  .video-term {
    width: 100%;
    .h(600);
  }
}
.iot-video-blk {
  .video-blk {
    .video-wrap {
      height: 100%;
      .video-term {
        height: 100%;
      }
    }
  }
}
.video-item {
  width: 50%;
  .pd(2);
  &:nth-child(2n) {
    padding-right: 0;
  }
  &:nth-child(2n + 1) {
    padding-left: 0;
  }
  .video-term {
    .h(360);
  }
}

.switch-map {
  .top(95);
  .right(20);
  .lh(30);
  border-radius: 3px;
  & > p {
    .fs(14);
    .pd(0, 15);
  }
}
.no-data {
  .pd(100);
  .fs(14);
  text-align: center;
}

.warn-tip-dialog {
  .el-dialog__body {
    min-height: auto;
    text-align: center;
    .pb(30);
  }
}

.switch-status {
  display: block;
  .w(20);
  .h(20);
  border-radius: 50%;
  border: 2px solid #fff;
  .px2rem(border-width, 2);
  background: #09ee3f;
  box-shadow: 0 0 inset 10px rgba(0, 0, 0, 0.8);
  &.close {
    background: #999;
  }
}
